<!DOCTYPE html>
<html lang="zh-CN">


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="viggo" />
  <title>MrLiu的博客 - </title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="shortcut icon" href="/static/favicon.ico">
  <link rel="stylesheet" href="/css/github.min.css">
  <script src="/js/highlight.min.js"></script>
  
<link rel="stylesheet" href="//fonts.loli.net/css?family=Arimo:400,700,400italic.css">
<link rel="stylesheet" href="/css/fonts/linecons/css/linecons.min.css">
<link rel="stylesheet" href="/css/fonts/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/xenon-core.min.css">
<link rel="stylesheet" href="/css/xenon-components.min.css">
<link rel="stylesheet" href="/css/xenon-skins.min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/nav.min.css">
<link rel="stylesheet" href="/css/md.css">

  
<script src="/js/jquery-1.11.1.min.js"></script>

  
<script src="/js/header.js"></script>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
        
<script src="/js/html5shiv.min.js"></script>

        
<script src="/js/respond.min.js"></script>

    <![endif]-->
  <script>
  hljs.configure({useBR: true});
  hljs.initHighlightingOnLoad();
  </script>
  <!-- / FB Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://liu-meizhou.github.io/js%E5%8E%9F%E5%9E%8B%E9%93%BE/index.html">
  <meta property="og:title" content="MrLiu的博客 - ">
  <meta property="og:description" content="">
  <meta property="og:site_name" content="MrLiu的博客 - ">
  
  <meta property="og:image" content="/images/webstack_banner_cn.png">
  
  <!-- / Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="MrLiu的博客 - ">
  <meta name="twitter:description" content="">
  
  <meta name="twitter:image" content="/images/webstack_banner_cn.png">
  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div class="page-container">
    <div class="sidebar-menu toggle-others fixed">
  <div class="sidebar-menu-inner">
    <header class="logo-env">
      <div class="logo">
        <a href="/index.html" class="logo-expanded">
          <img src="/images/logo@2x.png" width="100%" alt="" />
        </a>
        <a href="/index.html" class="logo-collapsed">
          <img src="/images/logo-collapsed@2x.png" width="40" alt="" />
        </a>
      </div>
      <div class="mobile-menu-toggle visible-xs">
        <a href="#" data-toggle="user-info-menu">
          <i class="linecons-cog"></i>
        </a>
        <a href="#" data-toggle="mobile-menu">
          <i class="fas fa-bars"></i>
        </a>
      </div>
    </header>
    <ul id="main-menu" class="main-menu">
      

      
        <li><a href="#前端技术开发标准" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="前端技术开发标准"><i class="far fa-star"></i><span class="title">前端技术开发标准</span></a><ul><li><a href="#技术栈" class="smooth" style="padding-left: 1em" title="技术栈"><i class="far fa-star"></i><span class="title">技术栈</span></a></li><li><a href="#项目要求" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="项目要求"><i class="far fa-star"></i><span class="title">项目要求</span></a><ul><li><a href="#1-代码风格" class="smooth" style="padding-left: 2em" title="1. 代码风格"><i class="far fa-star"></i><span class="title">1. 代码风格</span></a></li><li><a href="#2-项目级" class="smooth" style="padding-left: 2em" title="2. 项目级"><i class="far fa-star"></i><span class="title">2. 项目级</span></a></li><li><a href="#3-页面交互" class="smooth" style="padding-left: 2em" title="3. 页面交互"><i class="far fa-star"></i><span class="title">3. 页面交互</span></a></li><li><a href="#4-页面性能" class="smooth" style="padding-left: 2em" title="4. 页面性能"><i class="far fa-star"></i><span class="title">4. 页面性能</span></a></li><li><a href="#5-安全" class="smooth" style="padding-left: 2em" title="5. 安全"><i class="far fa-star"></i><span class="title">5. 安全</span></a></li><li><a href="#6-日志" class="smooth" style="padding-left: 2em" title="6. 日志"><i class="far fa-star"></i><span class="title">6. 日志</span></a></li><li><a href="#7-测试" class="smooth" style="padding-left: 2em" title="7. 测试"><i class="far fa-star"></i><span class="title">7. 测试</span></a></li><li><a href="#8-浏览器兼容性" class="smooth" style="padding-left: 2em" title="8. 浏览器兼容性"><i class="far fa-star"></i><span class="title">8. 浏览器兼容性</span></a></li></ul></li><li><a href="#附件：通用逻辑-模块" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="附件：通用逻辑/模块"><i class="far fa-star"></i><span class="title">附件：通用逻辑/模块</span></a><ul><li><a href="#业务通用逻辑-模块" class="smooth" style="padding-left: 2em" title="业务通用逻辑/模块"><i class="far fa-star"></i><span class="title">业务通用逻辑/模块</span></a></li><li><a href="#项目通用逻辑-模块" class="smooth" style="padding-left: 2em" title="项目通用逻辑/模块"><i class="far fa-star"></i><span class="title">项目通用逻辑/模块</span></a></li></ul></li><li><a href="#附件：目录结构及命名规则" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="附件：目录结构及命名规则"><i class="far fa-star"></i><span class="title">附件：目录结构及命名规则</span></a><ul><li><a href="#1-目录结构" class="smooth" style="padding-left: 2em" title="1.目录结构"><i class="far fa-star"></i><span class="title">1.目录结构</span></a></li><li><a href="#2-项目目录命名规范" class="fas fa-angle-down" style="cursor: pointer; padding-left: 2em" title="2.项目目录命名规范"><i class="far fa-star"></i><span class="title">2.项目目录命名规范</span></a><ul><li><a href="#Component" class="smooth" style="padding-left: 3em" title="Component"><i class="far fa-star"></i><span class="title">Component</span></a></li><li><a href="#JS-文件" class="smooth" style="padding-left: 3em" title="JS 文件"><i class="far fa-star"></i><span class="title">JS 文件</span></a></li><li><a href="#pages-多页面" class="smooth" style="padding-left: 3em" title="pages 多页面"><i class="far fa-star"></i><span class="title">pages 多页面</span></a></li><li><a href="#Vue-Router-Views" class="smooth" style="padding-left: 3em" title="Vue Router Views"><i class="far fa-star"></i><span class="title">Vue Router Views</span></a></li><li><a href="#api" class="smooth" style="padding-left: 3em" title="api"><i class="far fa-star"></i><span class="title">api</span></a></li></ul></li></ul></li><li><a href="#附件：前端基础开发规范" class="fas fa-angle-down" style="cursor: pointer; padding-left: 1em" title="附件：前端基础开发规范"><i class="far fa-star"></i><span class="title">附件：前端基础开发规范</span></a><ul><li><a href="#1-命名规范" class="smooth" style="padding-left: 2em" title="1.命名规范"><i class="far fa-star"></i><span class="title">1.命名规范</span></a></li><li><a href="#2-注释" class="smooth" style="padding-left: 2em" title="2.注释"><i class="far fa-star"></i><span class="title">2.注释</span></a></li><li><a href="#3-window-全局变量" class="smooth" style="padding-left: 2em" title="3.window 全局变量"><i class="far fa-star"></i><span class="title">3.window 全局变量</span></a></li><li><a href="#4-css-selector" class="smooth" style="padding-left: 2em" title="4.css selector"><i class="far fa-star"></i><span class="title">4.css selector</span></a></li></ul></li></ul></li>
      

      
      <li class="submit-tag">
        <a href="/author">
          <i class="far fa-heart"></i>
          <span class="tooltip-blue">关于作者</span>
        </a>
      </li>
      
      
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-eye"></i>
          <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-users"></i>
          <span id="busuanzi_container_site_uv">本站总访客数<span id="busuanzi_value_site_uv"></span></span>
        </a>
      </li>
      
    </ul>
  </div>
  <div class="e-resize"></div>
</div>

    <div class="main-content">
      <nav class="navbar user-info-navbar" role="navigation">
        <ul class="user-info-menu left-links list-inline list-unstyled">
          <li class="hidden-sm hidden-xs hover-line">
            <a href="#" data-toggle="sidebar">
              <i class="fas fa-bars"></i>
            </a>
          </li>
          <li class="dropdown hover-line language-switcher">
            <a href="/index.html" class="dropdown-toggle" data-toggle="dropdown">
              <img src="/images/flags/flag-cn.png" alt="flag-cn" /> Chinese
            </a>
            <ul class="dropdown-menu languages">
              <li class="active">
                <a href="/index.html">
                  <img src="/images/flags/flag-cn.png" alt="flag-cn" alt="flag-cn" /> Chinese
                </a>
              </li>
            </ul>
          </li>
          <li class="switch-mode hover-line" onclick="switchNightMode()">
            <a href="#">
              <svg t="1593061068148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1681" width="16" height="16">
                <path d="M582.4 326.4c-140.8 0-256 115.2-256 256s115.2 256 256 256 256-115.2 256-256-115.2-256-256-256z m0 448c-70.4 0-131.2-36.8-164.8-92.8 12.8 3.2 27.2 4.8 40 4.8 121.6 0 219.2-99.2 219.2-219.2 0-17.6-1.6-35.2-6.4-52.8 60.8 32 102.4 96 102.4 169.6 1.6 104-84.8 190.4-190.4 190.4zM582.4 262.4c17.6 0 32-14.4 32-32v-128c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 17.6 14.4 32 32 32zM262.4 582.4c0-17.6-14.4-32-32-32h-128c-17.6 0-32 14.4-32 32s14.4 32 32 32h128c17.6 0 32-14.4 32-32zM310.4 356.8c6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6 12.8-12.8 12.8-32 0-44.8l-91.2-91.2c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l91.2 91.2zM944 220.8c-12.8-12.8-32-12.8-44.8 0l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-33.6 0-44.8zM310.4 808l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-32 0-44.8-11.2-11.2-32-11.2-44.8 0z" p-id="1682" fill="#707070"></path>
              </svg>
            </a>
          </li>
        </ul>
        
        <a target="_blank" rel="noopener" href="https://github.com/liu-meizhou/liu-meizhou.github.io" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
        
      </nav>
      
<h1 id="前端技术开发标准"><a href="#前端技术开发标准" class="headerlink" title="前端技术开发标准"></a>前端技术开发标准</h1><h2 id="技术栈"><a href="#技术栈" class="headerlink" title="技术栈"></a>技术栈</h2><ul>
<li>Vue2</li>
<li>Node.js v14.15x LTS最新版</li>
<li>组件库 <a target="_blank" rel="noopener" href="https://antdv.com/docs/vue/introduce-cn/">Ant Design of Vue 1.x</a></li>
</ul>
<h2 id="项目要求"><a href="#项目要求" class="headerlink" title="项目要求"></a>项目要求</h2><h3 id="1-代码风格"><a href="#1-代码风格" class="headerlink" title="1. 代码风格"></a>1. 代码风格</h3><ul>
<li><p>Vue 代码风格以 <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/style-guide/">Vue 官方风格指南</a> 为基础</p>
</li>
<li><p>代码需要通过项目的 ESLint 检查 </p>
<ul>
<li>eslint 规则使用 <a target="_blank" rel="noopener" href="https://standardjs.com/rules-zhcn.html#javascript-standard-style">JavaScript standard 代码规范</a></li>
</ul>
</li>
<li><p>目录结构及命名规则，见下方 <a href="#%E9%99%84%E4%BB%B6%EF%BC%9A%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E5%8F%8A%E5%91%BD%E5%90%8D%E8%A7%84%E5%88%99">附件：目录结构及命名规则</a></p>
</li>
<li><p>附件：前端基础开发规范，见下方 <a href="#%E9%99%84%E4%BB%B6%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83">附件：前端基础开发规范</a></p>
</li>
</ul>
<h3 id="2-项目级"><a href="#2-项目级" class="headerlink" title="2. 项目级"></a>2. 项目级</h3><ul>
<li><p>项目公共逻辑需使用通用模块；通用模块由我们提供，具体清单见下方 <a href="#%E9%99%84%E4%BB%B6%EF%BC%9A%E9%80%9A%E7%94%A8%E9%80%BB%E8%BE%91/%E6%A8%A1%E5%9D%97">附件：通用逻辑/模块</a></p>
</li>
<li><p>使用 Yarn 代替 npm，并提交 yarn.lock 文件至 git 仓库</p>
<ul>
<li>registry “<a target="_blank" rel="noopener" href="https://registry.npm.taobao.org&quot;/">https://registry.npm.taobao.org&quot;</a></li>
</ul>
</li>
<li><p>编译产物中，静态资源（js, css, image, font 等）需在一个文件夹内，能与页面区分开</p>
</li>
<li><p>编译产物中的静态资源，如无例外，文件名都需要有 hash</p>
</li>
</ul>
<h3 id="3-页面交互"><a href="#3-页面交互" class="headerlink" title="3. 页面交互"></a>3. 页面交互</h3><ul>
<li>一些敏感、不可逆的操作，比如删除，结束等操作，需要有弹框二次确认</li>
<li>加载动画：耗时操作需要有加载状态的提示<ul>
<li>页面加载、局部加载</li>
<li>请求接口</li>
</ul>
</li>
<li>按钮重复点击<ul>
<li>表单提交等更新数据的场景，需要处理前端的重复点击</li>
</ul>
</li>
<li>页面宽度适配<ul>
<li>浏览器宽度变化时，不能出现布局变形</li>
<li>适配宽度:<code>1024x768</code> <code>1280x1024</code> <code>1920x1024</code></li>
<li><a target="_blank" rel="noopener" href="http://testsize.com/">http://testsize.com/</a></li>
</ul>
</li>
</ul>
<h3 id="4-页面性能"><a href="#4-页面性能" class="headerlink" title="4. 页面性能"></a>4. 页面性能</h3><blockquote>
<p>网络环境均为局域网下</p>
</blockquote>
<ul>
<li>打开页面到页面可交互时间需小于 3s<ul>
<li>部分页面，如（商品发布页、运费模板编辑页、店铺装修编辑页），不超过 5s</li>
</ul>
</li>
<li>页面引用的资源要进行优化,不能过大</li>
<li>如页面图片过多过大，需做懒加载</li>
<li>过度请求<ul>
<li>当网络或服务原因，接口响应过慢或报错等情况下，不应发起多个相同的请求</li>
<li>接口响应过慢：应当等待上一个请求响应后再发起下一个请求，或先取消上一个请求再发起</li>
<li>接口报错：不应该间隔过短地进行重试</li>
</ul>
</li>
</ul>
<h3 id="5-安全"><a href="#5-安全" class="headerlink" title="5. 安全"></a>5. 安全</h3><ul>
<li>前端页面需要预防 XSS 攻击</li>
</ul>
<h3 id="6-日志"><a href="#6-日志" class="headerlink" title="6. 日志"></a>6. 日志</h3><ul>
<li>需输出关键日志</li>
<li>业务关键流程错误，接口错误，必须输出</li>
<li>日志内容应该包括，模块、调用函数和必要说明，严禁无说明只将数据输出</li>
<li>禁止输出过多无意义的日志</li>
</ul>
<h3 id="7-测试"><a href="#7-测试" class="headerlink" title="7. 测试"></a>7. 测试</h3><ul>
<li><p>需编写页面的 e2e 测试并通过（测试用例由我们提供）</p>
</li>
<li><p>测试用例要有断言并输出关键日志,以nightwatch为例:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-string">&#x27;Demo test Ecosia.org&#x27;</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">browser</span>) </span>&#123;<br>  browser<br>    .url(<span class="hljs-string">&#x27;https://www.ecosia.org/&#x27;</span>)<br>    .waitForElementVisible(<span class="hljs-string">&#x27;body&#x27;</span>)<br>    .assert.titleContains(<span class="hljs-string">&#x27;Ecosia&#x27;</span>)<br>    .assert.visible(<span class="hljs-string">&#x27;input[type=search]&#x27;</span>)<br>    .setValue(<span class="hljs-string">&#x27;input[type=search]&#x27;</span>, <span class="hljs-string">&#x27;nightwatch&#x27;</span>)<br>    .assert.visible(<span class="hljs-string">&#x27;button[type=submit]&#x27;</span>,<span class="hljs-string">&#x27;提交按钮可见&#x27;</span>)<br>    .click(<span class="hljs-string">&#x27;button[type=submit]&#x27;</span>)<br>    .assert.containsText(<span class="hljs-string">&#x27;.mainline-results&#x27;</span>, <span class="hljs-string">&#x27;Nightwatch.js&#x27;</span>,<span class="hljs-string">&#x27;xx标签包含内容Nightwatch.js&#x27;</span>)<br>    .end();<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="8-浏览器兼容性"><a href="#8-浏览器兼容性" class="headerlink" title="8. 浏览器兼容性"></a>8. 浏览器兼容性</h3><ul>
<li>chrome 65 及以上</li>
</ul>
<h2 id="附件：通用逻辑-模块"><a href="#附件：通用逻辑-模块" class="headerlink" title="附件：通用逻辑/模块"></a>附件：通用逻辑/模块</h2><blockquote>
<p>提供在不同实训项目复用通用模块的能力，该部分由我们提供</p>
</blockquote>
<h3 id="业务通用逻辑-模块"><a href="#业务通用逻辑-模块" class="headerlink" title="业务通用逻辑/模块"></a>业务通用逻辑/模块</h3><ul>
<li><p>应用基础包<br>系统配置、用户系统等基本系统对接</p>
</li>
<li><p>浏览器限制<br>只允许指定浏览器使用</p>
</li>
<li><p>预览模式<br>老师能预览查看学生平台内容，但不能进行修改</p>
</li>
<li><p>实训任务<br>实训任务对接通用逻辑</p>
</li>
<li><p>考试模式<br>与考试系统（三级考证、1+X 考证）对接，用作考试时的逻辑处理</p>
</li>
<li><p>底稿<br>定期把数据（表单填写内容）写进 localStorage ，再定期保存到服务器上面，页面刷新或更换浏览器后可恢复数据</p>
</li>
<li><p>上传（秒传）<br>对接 fs 系统，提供秒传和断点续传</p>
</li>
</ul>
<h3 id="项目通用逻辑-模块"><a href="#项目通用逻辑-模块" class="headerlink" title="项目通用逻辑/模块"></a>项目通用逻辑/模块</h3><ul>
<li><p>本地开发请求转发代理、通用的打包配置</p>
</li>
<li><p>接口请求统一拦截处理</p>
</li>
<li><p>接口错误默认处理</p>
</li>
</ul>
<h2 id="附件：目录结构及命名规则"><a href="#附件：目录结构及命名规则" class="headerlink" title="附件：目录结构及命名规则"></a>附件：目录结构及命名规则</h2><h3 id="1-目录结构"><a href="#1-目录结构" class="headerlink" title="1.目录结构"></a>1.目录结构</h3><figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs sh">~ProjectRoot<br>├─ .editorconfig                    <span class="hljs-comment"># EditorConfig, 定义基本的编码风格</span><br>├─ .env                             <span class="hljs-comment"># 指定环境变量</span><br>├─ .eslintrc.js                     <span class="hljs-comment"># ESLint 配置</span><br>├─ .gitignore<br>├─ .idea                            <span class="hljs-comment"># JetBrains IDEs 项目配置</span><br>├─ .npmrc                           <span class="hljs-comment"># npm 配置</span><br>├─ babel.config.js<br>├─ dist                             <span class="hljs-comment"># 项目构建产品输出目录</span><br>├─ node_modules<br>├─ package.json<br>├─ .postcssrc.js<br>├─ public                           <span class="hljs-comment"># 静态资源，直接被拷贝</span><br>│    ├─ favicon.ico<br>│    └─ index.html                  <span class="hljs-comment"># 生成 html 默认模板</span><br>├─ src<br>│    ├─ api                         <span class="hljs-comment"># api</span><br>│    ├─ assets                      <span class="hljs-comment"># 静态资源</span><br>│    ├─ components                  <span class="hljs-comment"># Vue 可复用组件</span><br>│    └─ pages                       <span class="hljs-comment"># 多页面</span><br>│         └─ demo <br>│              │─ components<br>│              │    └─ ...<br>│              ├─ utils<br>│              ├─ App.vue<br>│              └─ main.js<br>├─ vue.config.js                    <span class="hljs-comment"># Vue Cli 调整 webpack 配置</span><br>└─ yarn.lock                        <span class="hljs-comment"># Yarn 固化依赖</span><br><br></code></pre></td></tr></table></figure>

<h3 id="2-项目目录命名规范"><a href="#2-项目目录命名规范" class="headerlink" title="2.项目目录命名规范"></a>2.项目目录命名规范</h3><p>原则上，应按模块划分，而不是按类型划分</p>
<h4 id="Component"><a href="#Component" class="headerlink" title="Component"></a><em>Component</em></h4><p>所有的 Component 文件都是以大写开头 (PascalCase)，components 里面的文件夹路径也是</p>
<p>但除了 index.vue</p>
<p>例子：</p>
<p>@/src/components/BackToTop/index.vue          # 项目级别的公共组件<br>@/src/pages/demo/components/Button.vue        # demo 页面级别的公共 Button 组件<br>@/src/pages/demo/components/ModuleA/Button.vue  # 仅限于 dmeo 页面 ModuleA 模块用到的组件</p>
<h4 id="JS-文件"><a href="#JS-文件" class="headerlink" title="JS 文件"></a><em>JS 文件</em></h4><p>所有的.js文件都遵循横线连接 (kebab-case)</p>
<p>例子：</p>
<p>@/src/utils/project-env.js<br>@/src/components/MarkdownEditor/default-options.js<br>@/src/pages/demo/foo-bar.js</p>
<h4 id="pages-多页面"><a href="#pages-多页面" class="headerlink" title="pages 多页面"></a><em>pages 多页面</em></h4><p>将生成以 src/pages 为根目录的同层次同名的 html 。</p>
<h4 id="Vue-Router-Views"><a href="#Vue-Router-Views" class="headerlink" title="Vue Router Views"></a><em>Vue Router Views</em></h4><p>若页面需要使用 Vue Router 划分，其目录，代表路由的.vue文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则</p>
<p>例子：</p>
<p>@/src/pages/demo/views/foo-bar/index.vue<br>@/src/pages/demo/views/foo-bar/kebab-case.js</p>
<p>PS: 仅代表路由的文件及文件夹使用横线连接，其中的 components utils 等其他文件按其原本规则</p>
<p>路由页面都放在这里，子路由 建文件嵌套放置，路由页面的组件放在该模块的 components 下，详见目录结构例子</p>
<p>例子：</p>
<p>@/src/views/demo/components/ModuleA/SearchButton.vue</p>
<h4 id="api"><a href="#api" class="headerlink" title="api"></a><em>api</em></h4><p>按模块进行划分，可按接口的模块名作为文件名划分</p>
<p> 例子：</p>
<p> @/api/user.js  # 为 /user/xxx user 模块的接口</p>
<h2 id="附件：前端基础开发规范"><a href="#附件：前端基础开发规范" class="headerlink" title="附件：前端基础开发规范"></a>附件：前端基础开发规范</h2><h3 id="1-命名规范"><a href="#1-命名规范" class="headerlink" title="1.命名规范"></a>1.命名规范</h3><ul>
<li><p>命名需英文语义化</p>
<ul>
<li><strong>禁止使用拼音</strong></li>
<li><strong>禁止混合中英文</strong></li>
<li>不用担心长度，若感觉命名无法表明意思，请在定义处给予注释说明</li>
</ul>
</li>
<li><p>缩写</p>
<ul>
<li>尽量避免</li>
<li>如需使用缩写，尽量使用常见的，通用的缩写</li>
<li>非常见缩写，需在定义处给出其原文</li>
</ul>
</li>
<li><p>js 变量</p>
<ul>
<li>小驼峰</li>
<li>应为名词</li>
<li>eg: myValue</li>
</ul>
</li>
<li><p>函数名</p>
<ul>
<li>小驼峰</li>
<li>多数情况下以动词开始</li>
<li>eg: getValue()</li>
</ul>
</li>
<li><p>常量</p>
<ul>
<li>全大写，下划线分隔</li>
<li>eg: MAX_COUNT</li>
</ul>
</li>
<li><p>类名</p>
<ul>
<li>大驼峰</li>
<li>eg: BaseClass</li>
</ul>
</li>
<li><p>除类外，其他变量不要使用大写驼峰命名</p>
</li>
</ul>
<h3 id="2-注释"><a href="#2-注释" class="headerlink" title="2.注释"></a>2.注释</h3><ul>
<li>关键逻辑、复杂逻辑需给予注释，描述其用途、流程</li>
</ul>
<h3 id="3-window-全局变量"><a href="#3-window-全局变量" class="headerlink" title="3.window 全局变量"></a>3.window 全局变量</h3><ul>
<li><p>如无必要，不要使用</p>
</li>
<li><p><strong>禁止</strong>任意、无限制地往 window 上挂全局变量、方法，<br>应当统一挂在有限的几个全局变量上</p>
</li>
</ul>
<h3 id="4-css-selector"><a href="#4-css-selector" class="headerlink" title="4.css selector"></a>4.css selector</h3><ul>
<li>不要用<code>title</code>,<code>name</code>这种普遍的命名</li>
<li>表单元素设置id</li>
</ul>


    </div>
  </div>
  <div class="go-up">
  <a href="#" rel="go-top">
    <i class="fas fa-angle-up"></i>
  </a>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/js/TweenMax.min.js"></script>
<script src="/js/resizeable.min.js"></script>
<script src="/js/joinable.js"></script>
<script src="/js/xenon-api.min.js"></script>
<script src="/js/xenon-toggles.min.js"></script>
<script src="/js/xenon-custom.min.js"></script>


<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script src="/js/lozad.min.js"></script>


</body>

<script src="/js/footer.js"></script>

</html>
